<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- 页面窗口自动调整到设备宽度，并禁止用户缩放页面 -->
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />

    <!-- 忽略将页面中的数字识别为电话号码 -->
    <meta name="format-detection" content="telephone=no" />

    <!-- 忽略 android 平台对邮箱的识别 -->
    <meta name="format-detection" content="email=no" />

    <!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，进针对ios的safari-->
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 可选default、black、black-translucent -->

    <!-- 需要在网站的根目录下存放favicon图标，防止404请求 -->
    <link rel="shortcut icon" href="/favicon.ico" />
    <title>LaiDianAPP-H5</title>
    <link rel="stylesheet" href="./assets/css/base.css" />
    <link rel="stylesheet" href="./assets/css/index.css" />
    <link rel="stylesheet" href="./assets/css/tab.css" />
  </head>
  <body>
    <div id="app">
      <div class="index">
        <div class="header-top">
          <div class="header-top-bg"></div>
          <div class="header-title-box">
            <div class="back-btn">
              <img src="./assets/img/ico-left-btn.png" alt="返回" />
            </div>
            <div class="right">
              <div class="header-title-text">来点</div>
            </div>
            <div class="back-btn"></div>
          </div>
          <div class="header-search">
            <img class="search-img" src="./assets/img/ico-search.png" />
            <input
              type="text"
              class="search-input"
              placeholder="输入你想要的东西"
            />
          </div>
        </div>
        <div class="main-content">
          <div class="navigation">
            <div class="item">
              <img src="./assets/img/first-canteen.png" alt="" />
              <div class="text">第一餐厅</div>
            </div>
            <div class="item">
              <img src="./assets/img/second-canteen.png" alt="" />
              <div class="text">第二餐厅</div>
            </div>
            <div class="item">
              <img src="./assets/img/fresh-fruit.png" alt="" />
              <div class="text">生鲜水果</div>
            </div>
            <div class="item">
              <img src="./assets/img/supermarket.png" alt="" />
              <div class="text">校园超市</div>
            </div>
            <div class="item">
              <img src="./assets/img/fruit-juice.png" alt="" />
              <div class="text">奶茶水果</div>
            </div>
          </div>
          <div class="announcement">
            <div>平台</div>
            <div>公告</div>
            <div>第一食堂经过两年半研制隆重退出全只因宴 2023.02.08</div>
          </div>
          <div class="banner">
            <img src="./assets/img/banner1.png" alt="" />
          </div>
          <div class="sorting">
            <div>综合排序</div>
            <div class="iconfont"></div>
            <div class="item">销量</div>
            <div class="item">星级</div>
            <div class="item">距离</div>
          </div>
          <div class="goods-content">
            <div class="goods-item">
              <div class="img">
                <img src="./assets/img/cabbage-fish.png" alt="" srcset="" />
              </div>
              <div class="describe">
                <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
                <div class="grade">
                  <div>4.9分</div>
                  <div>月售401</div>
                </div>
                <div class="order">
                  <div>
                    <div>起送¥17</div>
                    &nbsp;&nbsp;
                    <div>配送¥3</div>
                  </div>
                  <div>
                    <div>10分钟</div>
                    |
                    <div>500m</div>
                    &nbsp;
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-item">
              <div class="img">
                <img src="./assets/img/cabbage-fish.png" alt="" srcset="" />
              </div>
              <div class="describe">
                <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
                <div class="grade">
                  <div>4.9分</div>
                  <div>月售401</div>
                </div>
                <div class="order">
                  <div>
                    <div>起送¥17</div>
                    &nbsp;&nbsp;
                    <div>配送¥3</div>
                  </div>
                  <div>
                    <div>10分钟</div>
                    |
                    <div>500m</div>
                    &nbsp;
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-item">
              <div class="img">
                <img src="./assets/img/cabbage-fish.png" alt="" srcset="" />
              </div>
              <div class="describe">
                <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
                <div class="grade">
                  <div>4.9分</div>
                  <div>月售401</div>
                </div>
                <div class="order">
                  <div>
                    <div>起送¥17</div>
                    &nbsp;&nbsp;
                    <div>配送¥3</div>
                  </div>
                  <div>
                    <div>10分钟</div>
                    |
                    <div>500m</div>
                    &nbsp;
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-item">
              <div class="img">
                <img src="./assets/img/cabbage-fish.png" alt="" srcset="" />
              </div>
              <div class="describe">
                <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
                <div class="grade">
                  <div>4.9分</div>
                  <div>月售401</div>
                </div>
                <div class="order">
                  <div>
                    <div>起送¥17</div>
                    &nbsp;&nbsp;
                    <div>配送¥3</div>
                  </div>
                  <div>
                    <div>10分钟</div>
                    |
                    <div>500m</div>
                    &nbsp;
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-item">
              <div class="img">
                <img src="./assets/img/cabbage-fish.png" alt="" srcset="" />
              </div>
              <div class="describe">
                <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
                <div class="grade">
                  <div>4.9分</div>
                  <div>月售401</div>
                </div>
                <div class="order">
                  <div>
                    <div>起送¥17</div>
                    &nbsp;&nbsp;
                    <div>配送¥3</div>
                  </div>
                  <div>
                    <div>10分钟</div>
                    |
                    <div>500m</div>
                    &nbsp;
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-item">
              <div class="img">
                <img src="./assets/img/cabbage-fish.png" alt="" srcset="" />
              </div>
              <div class="describe">
                <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
                <div class="grade">
                  <div>4.9分</div>
                  <div>月售401</div>
                </div>
                <div class="order">
                  <div>
                    <div>起送¥17</div>
                    &nbsp;&nbsp;
                    <div>配送¥3</div>
                  </div>
                  <div>
                    <div>10分钟</div>
                    |
                    <div>500m</div>
                    &nbsp;
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-item">
              <div class="img">
                <img src="./assets/img/cabbage-fish.png" alt="" srcset="" />
              </div>
              <div class="describe">
                <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
                <div class="grade">
                  <div>4.9分</div>
                  <div>月售401</div>
                </div>
                <div class="order">
                  <div>
                    <div>起送¥17</div>
                    &nbsp;&nbsp;
                    <div>配送¥3</div>
                  </div>
                  <div>
                    <div>10分钟</div>
                    |
                    <div>500m</div>
                    &nbsp;
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-item">
              <div class="img">
                <img src="./assets/img/cabbage-fish.png" alt="" srcset="" />
              </div>
              <div class="describe">
                <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
                <div class="grade">
                  <div>4.9分</div>
                  <div>月售401</div>
                </div>
                <div class="order">
                  <div>
                    <div>起送¥17</div>
                    &nbsp;&nbsp;
                    <div>配送¥3</div>
                  </div>
                  <div>
                    <div>10分钟</div>
                    |
                    <div>500m</div>
                    &nbsp;
                  </div>
                </div>
              </div>
            </div>
            <div class="goods-item">
              <div class="img">
                <img src="./assets/img/cabbage-fish.png" alt="" srcset="" />
              </div>
              <div class="describe">
                <div class="title">麻辣酸菜鱼嘎嘎香的那种</div>
                <div class="grade">
                  <div>4.9分</div>
                  <div>月售401</div>
                </div>
                <div class="order">
                  <div>
                    <div>起送¥17</div>
                    &nbsp;&nbsp;
                    <div>配送¥3</div>
                  </div>
                  <div>
                    <div>10分钟</div>
                    |
                    <div>500m</div>
                    &nbsp;
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="loading">

          </div>
        </div>
      </div>
    </div>
    <div class="tab">
      <div class="tab-content">
        <div class="tab-item">
          <div><img src="./assets/img/tab-home.png" alt=""></div>
          <div><div class="text">首页</div></div>
        </div>
        <div class="tab-item">
          <div><img src="./assets/img/tab-home.png" alt=""></div>
          <div><div class="text">首页</div></div>
        </div>
        <div class="tab-item">
          <div><img src="./assets/img/tab-home.png" alt=""></div>
          <div><div class="text">首页</div></div>
        </div>
      </div>
    </div>
    <script src="./assets/js/flexible.js"></script>
    <script>
      window.addEventListener("scroll", (e) => {
        console.log(e)
        // 滚动条距离顶部
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop
        // 可视区域
        let clientHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        // 滚动条内容的总高度
        let scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight
        if (scrollTop + clientHeight == scrollHeight) {
          console.log("到底部了")
          handleScroll()
        }
      })
      function handleScroll() {
        if (this.button) {
          setTimeout(() => {
            this.button = false // 设置一个按钮，是否可以上拉获取数据，写在 data 中
            this.page += 1 // 获取下一页的数据
            this.getlist() // 向后端获取数据
          }, 500)
        }
      }
    </script>
  </body>
</html>
